.container {
	box-sizing: border-box;
	position: relative;
	margin: 20px auto;
	width: 1000px;
	height: 270px;
	overflow: hidden;
}

.container .wrapper {
	position: absolute;
	top: 0;
	left: 0;
	/* JS中需要再次计算 */
	display: flex;
	/* width: 400%; */
	height: 100%;
}

.container .wrapper .slide {
	box-sizing: border-box;
	width: 1000px;
	height: 100%;
}

.container .wrapper .slide img {
	width: 100%;
	height: 100%;
}

.container .pagination {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	font-size: 0;
}

.container .pagination span {
	display: inline-block;
	margin: 0 4px;
	width: 6px;
	height: 6px;
	background: rgba(0, 0, 0, .4);
	border: 2px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	cursor: pointer;
}

.container .pagination span.active {
	background: rgba(255, 255, 255, .4);
	border-color: rgba(0, 0, 0, .4);
}

.container .button-prev,
.container .button-next {
	position: absolute;
	top: 50%;
	margin-top: -35px;
	z-index: 999;
	width: 40px;
	height: 70px;
	background: url("./images/icon-slides.png") no-repeat;
}

.container .button-prev {
	left: 0;
	background-position: -83px 0;
}

.container .button-prev:hover {
	background-position: 0 0;
}

.container .button-next {
	right: 0;
	background-position: -124px 0;
}

.container .button-next:hover {
	background-position: -41px 0;
}